<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/jazz-timeline.css">
        <title>Jazz Timeline </title>         
    </head>
    <body class="custom-bg">
        <div class="jazz-timeline-wrapper" id="skrollr-body">
            <div class="jazz-timeline">
            
                <div class="timeline-post">
                    <div class="timeline-meta for-large-icons">
                    	<div class="meta-details">Crystal Loren</div>
                    </div> 
                    <div class="timeline-icon icon-larger iconbg-turqoise icon-color-white">
                    	<div class="icon-placeholder">Dec <span>25</span></div>
                        <div class="timeline-bar"></div>
                    </div>
                    <div class="timeline-content"
                    	data--10-bottom-top="transform: rotateX(-90deg); opacity: 0;"
                        data--80-bottom-bottom="transform: rotateX(0deg); opacity: 1;">
                        <h2 class="content-title"> Christmas Day </h2>
                        <div class="content-details">
                            <p>Christmas or Christmas Day is an annual festival commemorating the birth of Jesus Christ, 
                            observed most commonly on December 25 as a religious and cultural celebration among billions 
                            of people around the world. </p>
                        </div>
                    </div><!-- timeline content -->
                </div><!-- .timeline-post --> 
                
                <div class="timeline-post">
                    <div class="timeline-meta for-large-icons">
                    	<div class="meta-details">Jasper Stevens</div>
                    </div> 
                    <div class="timeline-icon icon-larger iconbg-black icon-color-white">
                    	<div class="icon-placeholder">Nov <span>24</span></div>
                        <div class="timeline-bar"></div>
                    </div>
                    <div class="timeline-content"
                    	data--10-bottom-top="transform: rotateX(-90deg); opacity: 0;"
                        data--80-bottom-bottom="transform: rotateX(0deg); opacity: 1;">
                        <h2 class="content-title"> Thanksgiving Day </h2>
                        <div class="content-details">
                            <p>Thanksgiving Day, is an important public holiday, celebrated on the fourth Thursday in November 
                            in the United States. It originated as a harvest festival. Thanksgiving has been celebrated nationally 
                            on and off since 1789, after a proclamation by George Washington.</p>
                        </div>
                    </div><!-- timeline content -->
                </div><!-- .timeline-post -->                            
            
                <div class="timeline-post">
                    <div class="timeline-meta for-large-icons">
                    	<div class="meta-details">Norman Pallet</div>
                    </div> 
                    <div class="timeline-icon icon-larger iconbg-brown icon-color-white">
                    	<div class="icon-placeholder">Oct <span>12</span></div>
                        <div class="timeline-bar"></div>
                    </div>
                    <div class="timeline-content"
                    	data--10-bottom-top="transform: rotateX(-90deg); opacity: 0;"
                        data--80-bottom-bottom="transform: rotateX(0deg); opacity: 1;">
                        <h2 class="content-title"> Yom Kippur </h2>
                        <div class="content-details">
                            <p>Yom Kippur is a Jewish holiday known as the Day of Atonement. Many people of Jewish 
                            faith in the United States spend the day fasting and praying. Its theme centers on 
                            atonement and repentance. </p>
                        </div>
                    </div><!-- timeline content -->
                </div><!-- .timeline-post -->             
            
                <div class="timeline-post">
                    <div class="timeline-meta for-large-icons">
                    	<div class="meta-details">Ismail Dunkan</div>
                    </div> 
                    <div class="timeline-icon icon-larger iconbg-indigo icon-color-white">
                    	<div class="icon-placeholder">Sep <span>13</span></div>
                        <div class="timeline-bar"></div>
                    </div>
                    <div class="timeline-content"
                    	data--10-bottom-top="transform: rotateX(-90deg); opacity: 0;"
                        data--80-bottom-bottom="transform: rotateX(0deg); opacity: 1;">
                        <h2 class="content-title"> Eid al-Adha </h2>
                        <div class="content-details">
                            <p>Eid-al-Adha is an Islamic festival to mark Ibrahim's willingness to follow Allah's 
                            command to sacrifice his son. It is celebrated around the 10th to 13th days of the 
                            Islamic month of Dhu al-Hijjah.</p>
                        </div>
                    </div><!-- timeline content -->
                </div><!-- .timeline-post -->             
            
                <div class="timeline-post">
                    <div class="timeline-meta for-large-icons">
                    	<div class="meta-details">Virginia Kent</div>
                    </div> 
                    <div class="timeline-icon icon-larger iconbg-purple icon-color-white">
                    	<div class="icon-placeholder">Aug <span>07</span></div>
                        <div class="timeline-bar"></div>
                    </div>
                    <div class="timeline-content"
                    	data--10-bottom-top="transform: rotateX(-90deg); opacity: 0;"
                        data--80-bottom-bottom="transform: rotateX(0deg); opacity: 1;">
                        <h2 class="content-title"> Purple Heart Day </h2>
                        <div class="content-details">
                            <p>The holiday also encourages people to pay their respects to fallen soldiers, 
                            to listen to the stories of soldiers and veterans, and to thank them for their 
                            service to the nation.</p>
                        </div>
                    </div><!-- timeline content -->
                </div><!-- .timeline-post -->            
            
                <div class="timeline-post">
                    <div class="timeline-meta for-large-icons">
                    	<div class="meta-details">Paul Smith</div>
                    </div> 
                    <div class="timeline-icon icon-larger iconbg-grey icon-color-white">
                    	<div class="icon-placeholder">Jul <span>24</span></div>
                        <div class="timeline-bar"></div>
                    </div>
                    <div class="timeline-content"
                    	data--10-bottom-top="transform: rotateX(-90deg); opacity: 0;"
                        data--80-bottom-bottom="transform: rotateX(0deg); opacity: 1;">
                        <h2 class="content-title"> Parents' Day </h2>
                        <div class="content-details">
                            <p>Parents Day is celebrated in July each year to recognize and promote parenting as a 
                            crucial part of families and the wider community.</p>
                        </div>
                    </div><!-- timeline content -->
                </div><!-- .timeline-post -->             
            
                <div class="timeline-post">
                    <div class="timeline-meta for-large-icons">
                    	<div class="meta-details">Jasmine Mason</div>
                    </div> 
                    <div class="timeline-icon icon-larger iconbg-blue icon-color-white">
                    	<div class="icon-placeholder">Jun <span>19</span></div>
                        <div class="timeline-bar"></div>
                    </div>
                    <div class="timeline-content"
                    	data--10-bottom-top="transform: rotateX(-90deg); opacity: 0;"
                        data--80-bottom-bottom="transform: rotateX(0deg); opacity: 1;">
                        <h2 class="content-title"> Father's Day </h2>
                        <div class="content-details">
                            <p>Father's Day celebrates the contribution that fathers and father figures make 
                            for their children's lives. Its origins may lie in a memorial service held for a 
                            large group of men, many of them fathers, who were killed in a mining accident 
                            in Monongah, West Virginia in 1907.</p>
                        </div>
                    </div><!-- timeline content -->
                </div><!-- .timeline-post -->            
            
                <div class="timeline-post">
                    <div class="timeline-meta for-large-icons">
                    	<div class="meta-details">Challotte Brontie</div>
                    </div> 
                    <div class="timeline-icon icon-larger iconbg-red icon-color-white">
                    	<div class="icon-placeholder">May <span>08</span></div>
                        <div class="timeline-bar"></div>
                    </div>
                    <div class="timeline-content"
                    	data--10-bottom-top="transform: rotateX(-90deg); opacity: 0;"
                        data--80-bottom-bottom="transform: rotateX(0deg); opacity: 1;">
                        <h2 class="content-title"> Mother's Day </h2>
                        <div class="content-details">
                            <p>Mother's Day celebrates motherhood and it is a time to appreciate mothers and 
                            mother figures. Many people give gifts, cards, flowers, candy, a meal in a restaurant 
                            or other treats to their mother and mother figures.</p>
                        </div>
                    </div><!-- timeline content -->
                </div><!-- .timeline-post -->
                
                <div class="timeline-post">
                    <div class="timeline-meta for-large-icons">
                    	<div class="meta-details">Sharon Stone</div>
                    </div>   
                    <div class="timeline-icon icon-larger iconbg-orange icon-color-white">
                    	<div class="icon-placeholder">Apr <span>23</span></div>
                        <div class="timeline-bar"></div>
                    </div>                    
                    <div class="timeline-content"
                    	data--10-bottom-top="transform: rotateX(-90deg); opacity: 0;"
                        data--80-bottom-bottom="transform: rotateX(0deg); opacity: 1;">
                        <h2 class="content-title"> Passover </h2>
                        <div class="content-details">
                            <p>Passover marks the Israelites' liberation from slavery and their exodus 
                            from Egypt around 3000 years ago. They may do this by inviting people into their homes or 
                            giving them a gift basket.</p>
                        </div>
                    </div><!-- timeline content -->
                </div><!-- .timeline-post -->
                
                <div class="timeline-post">
                    <div class="timeline-meta for-large-icons">
                    	<div class="meta-details">Billy Matzeger</div>
                    </div>                 
                    <div class="timeline-icon icon-larger iconbg-opal icon-color-white">
                    	<div class="icon-placeholder">Mar <span>27</span></div>
                        <div class="timeline-bar"></div>
                    </div>
                    <div class="timeline-content"
                    	data--10-bottom-top="transform: rotateX(-90deg); opacity: 0;"
        				data--80-bottom-bottom="transform: rotateX(0deg); opacity: 1;">
                        <h2 class="content-title"> Easter Sunday </h2>
                        <div class="content-details">
                            <p>Easter Sunday is an important day in the Christian church calendar because it 
                            celebrates Jesus Christ's resurrection. The Easter date depends on the ecclesiastical 
                            approximation of the March equinox. </p>
                        </div>
                    </div><!-- timeline content -->
                </div><!-- .timeline-post --> 
                
                <div class="timeline-post">
                    <div class="timeline-meta for-large-icons">
                    	<div class="meta-details">Pierre Morgul</div>
                    </div>                 
                    <div class="timeline-icon icon-larger iconbg-green icon-color-white">
                    	<div class="icon-placeholder">Feb <span>14</span></div>
                        <div class="timeline-bar"></div>
                    </div>
                    <div class="timeline-content"
                    	data--10-bottom-top="transform: rotateX(-90deg); opacity: 0;"
                        data--80-bottom-bottom="transform: rotateX(0deg); opacity: 1;">
                        <h2 class="content-title"> Valentine's Day </h2>
                        <div class="content-details">
                            <p>Valentine's Day is celebrated on February 14. It is a festival of romantic love and 
                            many people give cards, letters, flowers or presents to their spouse or partner. </p>
                        </div>
                    </div><!-- timeline content -->
                </div><!-- .timeline-post --> 
                
                
                <div class="timeline-post">
                    <div class="timeline-meta for-large-icons">
                    	<div class="meta-details">Chris Williams</div>
                    </div>                 
                    <div class="timeline-icon icon-larger iconbg-pink icon-color-white">
                    	<div class="icon-placeholder">Jan <span>01</span></div>
                        <div class="timeline-bar"></div>
                    </div>
                    <div class="timeline-content"
                    	data--10-bottom-top="transform: rotateX(-90deg); opacity: 0;"
                        data--80-bottom-bottom="transform: rotateX(0deg); opacity: 1;">
                        <h2 class="content-title"> New Year's Day </h2>
                        <div class="content-details">
                            <p>New Year's Day falls on January 1 and marks the start of a new year according to the Gregorian calendar. 
                            It marks the end of New Year's Eve celebrations across and Worldwide and gives all people a chance to 
                            remember the previous year.</p>
                        </div>
                    </div><!-- timeline content -->
                </div><!-- .timeline-post --> 
                                                         
            </div><!-- .timeline -->
        </div><!-- .jazz-timeline-wrapper -->
		<script type="text/javascript" src="js/skrollr.min.js"></script>
        <script type="text/javascript">
        	var s = skrollr.init({ forceHeight: false });
        </script>           
    </body>
</html>
